<template>
    <div>
        <Search :loading="loading" v-model="queryModel.query" @search="getOrderList"></Search>
        <Table :loading="loading" :cols="cols" :data="list" :total="total" v-model="queryModel" @change="getOrderList" >
            <template v-slot:pay="{row}">
                <el-tag :type="row.pay_status == 0 ? 'danger':'success' ">
                    {{row.pay_status == 0 ? '未' : '已' }}付款
                </el-tag>
            </template>
            <template v-slot:time="{row:{create_time}}">
                {{new Date(create_time * 1000).format()}}
            </template>
            <template v-slot:action="{row}">
                <el-button type="primary" size="mini" @click="model = {};$refs.df.show()">编辑</el-button>
                <el-button type="primary" size="mini" @click="getExpressList">查看物流</el-button>
            </template>
        </Table>
        <DF :value="model" :opts="opts" ref="df" @confi rm="$refs.df.hide()"  />
        <Dialog clickClose title="物流进度" ref="d" >
            <div class="boxs" v-for="(item,index) in expressList" :key="index">
                <div class="content">
                    {{item.context}}
                </div>
                <div class="time">
                    {{item.time}}
                </div>
            </div>
            <div slot="footer"></div>
        </Dialog>
    </div>
</template>
<script>
import { getOrders ,getExpress , } from '@/api/orders';
import city from '@/utils/city';
export default {
    name:"Order",
    data() {
        return {
            /**
             * 物流列表
             */
            expressList:[],
            /**
             * 模型
             */
            model:{},
            /**
             * 表单配置项
             */
            opts:{
                city:{
                    title:"省市区/县",
                    required:true,
                    tag:"cas",
                    value:city,
                },
                address:{
                    title:"详细地址",
                    required:true,
                    max:50,
                },
                
            },
            /**
             * 列
             */
            cols:[
                {
                    title:'#',
                    type:"index",
                },
                {
                    title:'订单编号',
                    name:"order_number",
                },
                {
                    title:'订单价格',
                    name:"order_price",
                },
                {
                    title:'是否付款',
                    name:"pay_status",
                    slot:"pay",
                },
                {
                    title:'是否发货',
                    name:"is_send",
                },
                {
                    title:'下单时间',
                    slot:"time",
                    width:230
                },
                {
                    title:'操作',
                    slot:"action",
                    align:"center",
                    width:200,
                },
            ],
            /**
             * 总条数
             */
            total:0,
            /**
             * 数据列表
             */
            list:[],
            /**
             * loading
             */
            loading:false,
            /**
             * 查询模型
             */
            queryModel:{
                query:"",
                pagesize:10,
                pagenum:1,
            },
        };
    },
    methods: {
        /**
         * 获取物流信息列表
         */
        async getExpressList(){
            try {
                this.loading = true;
                this.expressList = await getExpress();
                this.$refs.d.show();
            } catch (error) {};
            this.loading = false;
        },
        /**
         * 获取订单列表
         */
        async getOrderList(){
            try {
                this.loading = true;
                const { goods,total } = await getOrders(this.queryModel);
                this.list = goods;
                this.total = total;
            } catch (error) {};
            this.loading = false;
        }
    },
    created() {
        this.getOrderList();
    },
}
</script>
<style lang="less" scoped>
    .boxs{
        border-left: 2px solid #e4e7ed;
        padding: 0 0 20px 15px;
        position: relative;
         &::before{
        content:"";
        border-radius: 50%;
        display: inline-block;
        position: absolute;
        width: 12px;
        height: 12px;
        background:#e4e7ed;
        left: -6px;
        top: -6px;
        }
        .content{
            position: relative;
            top: -5px;
        }
        &:last-child{
            border: none;
        }
    }
   
</style>